<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style type="text/css">
			.box {
				width: 400px;
				height: 400px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box"> </div>
		<script>
			var mycharts = echarts.init(document.querySelector('.box'))
			var option = {
			    title: {
			        text: '某站点用户访问来源',
			        subtext: '纯属虚构',
			         left: 'center'
			    },
			    tooltip: {
			        trigger: 'item'
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			    },
			    series: [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius: '50%',
			            data: [
			                {value: 1048, name: '搜索引擎'},
			                {value: 735, name: '直接访问'},
			                {value: 580, name: '邮件营销'},
			                {value: 484, name: '联盟广告'},
			                {value: 300, name: '视频广告'}
			            ],
			            emphasis: {
			                itemStyle: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			mycharts.setOption(option)
		</script>
	</body>
</html>
